<template>
  <!-- 左侧工具栏 -->
  <div class="tupu-toolbar">
    <ul>
      <li id="equalZoom" @click="equalZoom">
        <span class="equal-zoom"></span>
        等比
      </li>
      <li id="TrEnlarge" @click="enlarge">
        <span class="big"></span>
        放大
      </li>
      <li id="TrReduce" @click="reduce">
        <span class="small"></span>
        缩小
      </li>
      <li id="TrRefresh" @click="refresh">
        <span class="refresh"></span>
        刷新
      </li>
      <li @click="screen">
        <span :class="screenStatus ? 'screened' : 'screen'"></span>
        {{ screenTxt }}
      </li>
      <li id="TrSave" @click="save">
        <span class="save"></span>
        保存
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'forceGraph',
  data() {
    return {
      screenStatus: false, //非全屏状态
    };
  },
  computed: {
    screenTxt() {
      return this.screenStatus ? '退出' : '全屏';
    },
  },
  components: {},
  methods: {
    equalZoom() {
      this.$emit('equalZoom');
    },
    enlarge() {
      this.$emit('enlarge');
    },
    reduce() {
      this.$emit('reduce');
    },
    refresh() {
      this.$emit('refresh');
    },
    screen() {
      this.screenStatus = !this.screenStatus;
      this.$emit('screen', this.screenStatus);
    },
    save() {
      this.$emit('save');
    },
  },
  watch: {
    $route: {
      handler: function (nVal, oVal) {},
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
};
</script>

<style lang="less">
.tupu-toolbar {
  position: absolute;
  right: 20px;
  bottom: 80px;
  z-index: 20;
  box-sizing: border-box;
  width: 46px;
  font-size: 18px;
}
.tupu-toolbar ul {
  box-sizing: border-box;
  width: 48px;
  margin: 0px;
  margin-top: 8px;
  padding: 0px;
  background: #fff;
  border: 1px solid #dedede;
}
.tupu-toolbar ul > li {
  box-sizing: border-box;
  width: 46px;
  height: 64px;
  padding: 5px;
  color: #666;
  font-size: 12px;
  text-align: center;
  text-align: center;
}
.tupu-toolbar ul > li:hover,
.tupu-toolbar ul > li.active {
  width: 48px;
  margin-left: -1px;
  color: #fff;
  background: #128bed;
  cursor: pointer;
}
.tupu-toolbar ul > li > span {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0px auto;
  background-size: 360px 60px;
}
.tupu-toolbar ul > li:hover > span.txt,
.tupu-toolbar ul > li.active > span.txt {
  background-position: -270px -30px;
}
.tupu-toolbar ul > li > span.big {
  background-position: -90px 0px;
}
.tupu-toolbar ul > li > span.small {
  background-position: -120px 0px;
}
.tupu-toolbar ul > li > span.refresh {
  background-position: -60px 0px;
}
.tupu-toolbar ul > li > span.screened {
  background-position: -210px 0px;
}
.tupu-toolbar ul > li > span.screen {
  background-position: -180px 0px;
}
.tupu-toolbar ul > li > span.save {
  background-position: -150px 0px;
}
.tupu-toolbar ul > li > span.txt {
  background-position: -270px 0px;
}
.tupu-toolbar ul > li:hover > span.big {
  background-position: -90px -30px;
}
.tupu-toolbar ul > li:hover > span.small {
  background-position: -120px -30px;
}
.tupu-toolbar ul > li:hover > span.refresh {
  background-position: -60px -30px;
}
.tupu-toolbar ul > li:hover > span.screened {
  background-position: -210px -30px;
}
.tupu-toolbar ul > li:hover > span.screen {
  background-position: -180px -30px;
}
.tupu-toolbar ul > li:hover > span.save {
  background-position: -150px -30px;
}
.tupu-toolbar ul > li > span.equal-zoom {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0px auto;
  background-size: 30px 30px;
}
</style>
